<template>
  <div>
    <div class="banner">
      <img
        src="http://www.bluemoon.com.cn/_nuxt/img/cleanBanner.36f8f41.jpg"
        alt=""
      />
    </div>
    <div class="content">
      <div class="typeNav">
        <ul class="typeList">
          <li
            v-for="(val, index) in typeList"
            :key="index"
            @click="n = index"
            :class="n === index ? 'sel' : ''"
          >
            {{ val }}
          </li>
        </ul>
        <div class="search">
          <div class="sea_b">
            <i></i>
            <input type="text" placeholder="输入产品信息搜索产品" />
          </div>
          <div><a href="#">搜索</a></div>
        </div>
      </div>
      <div class="typeCon">
        <div class="clothes" v-show="n === 0">
          <h1>衣物清洁护理类</h1>
          <ul class="clear">
            <li v-for="(item, index) in person" :key="index">
              <a href="#">
                <img :src="item.src" alt="" />
                <p>{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="person" v-show="n === 1">
          <h1>个人清洁护理类</h1>
          <ul class="clear">
            <li v-for="(item, index) in home" :key="index">
              <a href="#">
                <img :src="item.src" alt="" />
                <p>{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="home" v-show="n === 2">
          <h1>家居清洁护理类</h1>
          <ul class="clear">
            <li v-for="(item, index) in clothes" :key="index">
              <a href="#">
                <img :src="item.src" alt="" />
                <p>{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.clear:after {
  content: '';
  display: block;
  clear: both;
}
.banner {
  width: 100%;
  height: 427px;
  margin-top: 80px;
  img {
    width: 100%;
    height: 100%;
  }
}
.content {
  width: 1306px;
  margin: 0 auto;
}
.typeNav {
  width: 100%;
  height: 44px;
  padding: 45px 0;
  display: flex;
  justify-content: space-between;
}
.typeList {
  display: flex;
  width: 468px;
  border-bottom: 1px solid #f0f1f2;
  justify-content: space-between;
  li {
    line-height: 43px;
    cursor: pointer;
  }
  .sel {
    color: #1d3e97;
    border-bottom: 2px solid #1d3e97;
  }
}
.search {
  display: flex;
  align-items: center;
  .sea_b {
    display: flex;
    align-items: center;
    padding-left: 8px;
    width: 205px;
    height: 26px;
    border-radius: 13px;
    background-color: #f1f1f1;
    i {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('')
        no-repeat;
      background-size: 100%;
    }
    input {
      border: none;
      outline: none;
      background-color: #f1f1f1;
    }
  }
  a {
    color: #0349c3;
    font-size: 17px;
    font-weight: 600;
    margin-left: 20px;
  }
}
.typeCon {
  width: 100%;
  h1 {
    margin-bottom: 60px;
    font-size: 50px;
    font-weight: 400;
    color: #1d3e97;
    opacity: 0.5;
  }
  .clothes {
    width: 1306px;
  }
  ul {
    justify-content: space-between;
    width: 1306px;
    li {
      width: 285px;
      float: left;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #e3e3e3;
      transition: all 0.5s ease-out;
      margin-bottom: 81px;
      margin-right: 41px;
      &:hover {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        transform: scale(1.05);
        a {
          color: #fff;
        }
        p {
          background: #1d3e97;
        }
      }
      a {
        color: #000;
        font-size: 22px;
      }
      img {
        width: 280px;
      }
      p {
        width: 225px;
        height: 68px;
        padding: 17px 30px;
        transition: all 0.5s ease-out;
        white-space: pre-line;
        word-wrap: break-word;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      typeList: ['衣物清洁护理类', '个人清洁护理类', '家居清洁护理类'],
      clothes: [
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555389310_%E8%87%B3%E5%B0%8A%E7%94%9F%E7%89%A9%E7%A7%91%E6%8A%80.png',
          name: '至尊生物科技洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555432840_%E6%9E%81%E6%B4%97%E8%87%B3%E5%B0%8A.png',
          name: '机洗至尊',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555498906_%E9%A2%84%E6%B6%82%E7%A5%9E%E5%99%A8.png',
          name: '预涂·手洗双用型洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555389310_%E8%87%B3%E5%B0%8A%E7%94%9F%E7%89%A9%E7%A7%91%E6%8A%80.png',
          name: '至尊生物科技洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555707583_%E4%BA%AE%E7%99%BD%E5%A2%9E%E8%89%B3.png',
          name: '亮白增艳洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555733592_%E6%B7%B1%E5%B1%82%E6%B4%81%E5%87%80.png',
          name: '至尊生物科技洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555389310_%E8%87%B3%E5%B0%8A%E7%94%9F%E7%89%A9%E7%A7%91%E6%8A%80.png',
          name: '深层洁净护理洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555875804_%E6%89%8B%E6%B4%97%E4%B8%93%E7%94%A8%E6%B4%97%E8%A1%A3.png',
          name: '手洗专用洗衣液',
        },
      ],
      person: [
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1617258458802_%E8%87%AA%E5%8A%A8%E6%B4%97%E6%89%8B%E6%9C%BA%E7%99%BD.jpg',
          name: '自动洗手机',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556625066_%E5%87%80%E4%BA%AB%E6%B0%A8%E5%9F%BA%E9%85%B8%E6%B4%97.png',
          name: '净享氨基酸 洗手露',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1614158735508_%E5%85%8D%E6%B4%97.png',
          name: '免洗抑菌 洗手液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604459148006_%E9%87%8E%E8%8F%8A%E8%8A%B1390.png',
          name: '野菊花洗手液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604450848694_%E4%BA%A7%E5%93%81%E5%9B%BE%E7%89%87-0.png',
          name: '刨磨抑菌 洗手液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556645720_%E7%BB%B4e%E6%BB%8B%E6%B6%A6%E6%B4%97%E6%89%8B.png',
          name: '至尊生物科技洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1614158757232_620123.png',
          name: '深层洁净护理洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1605170134781_%E5%84%BF%E7%AB%A5%E6%B4%97%E6%89%8B%E6%B6%B2.png',
          name: '手洗专用洗衣液',
        },
      ],
      home: [
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556789680_%E5%A4%A9%E9%9C%B2%E9%A4%90%E5%85%B7%E6%9E%9C%E8%94%AC.png',
          name: '天露餐具果蔬 洁净精华',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556810727_%E6%9C%88%E4%BA%AE%E5%B0%8F%E5%B1%8B%E6%B4%97%E7%A2%97.png',
          name: '油污泡沫型',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556857289_%E6%B2%B9%E6%B1%A1%E5%85%8B%E6%98%9F%E6%B3%A1%E6%B2%AB.png',
          name: '月亮小屋',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604555389310_%E8%87%B3%E5%B0%8A%E7%94%9F%E7%89%A9%E7%A7%91%E6%8A%80.png',
          name: '至尊生物科技洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604556901489_%E5%8D%AB%E8%AF%BA%E9%99%A4%E9%9C%89.png',
          name: '亮白增艳洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1607743007069_%E5%B0%BA%E5%AF%B8%E8%B0%83%E6%95%B4.png',
          name: '至尊生物科技洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604557006061_84%E6%B6%88%E6%AF%92%E6%B6%B2.png',
          name: '深层洁净护理洗衣液',
        },
        {
          src:
            'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1623226826044_%E5%A4%9A%E7%94%A8%E9%80%94%E9%99%A4%E8%8F%8C%E6%B6%B2.jpg',
          name: '手洗专用洗衣液',
        },
      ],
      n: 0,
    }
  },
}
</script>
